<template>
    <div class="w750" style="max-width: 750px; margin: 0 auto; width: 100%; height: 100%">
        <!-- 账号管理 -->
        <div class="account">
            <div class="item">
                <div class="entry-con">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name" style="line-height: 60px">头像</span>
                        </div>
                        <div class="fr files">
                            <em class="head-portrait" v-if="userInfo.avatarUrl != null">
                                <img :src="photoServer + userInfo.avatarUrl" alt />
                            </em>
                            <em class="head-portrait" v-else>
                                <img src="../../assets/images/head-default.png" alt />
                            </em>
                            <input type="file" name="files" accept="image/*" @change="handleFile" v-if="!isApp" class="hiddenInput" ref="picture" />
                            <div @click="showpic" v-if="isApp"></div>
                            <em class="arr" style="margin-top: 30px">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
                <div class="entry-con" @click="goEdit('nickname', userInfo.nickName, '修改昵称')">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">昵称</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt">{{ userInfo.nickName ? userInfo.nickName : '暂无昵称' }}</span>
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
                <div class="entry-con" @click="goEdit('phone', userInfo.mobile, '更换手机号')">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">手机</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt">{{ userInfo.mobile }}</span>
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
                <div class="entry-con" @click="goEdit('loginpwd', userInfo.mobile, '修改密码')">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">登录密码</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt"></span>
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
				<div class="entry-con" @click="goBalanceCode">
				    <div class="con-box">
				        <div class="fl">
				            <span class="entry-name">交易密码</span>
				        </div>
				        <div class="fr">
				            <span class="entry-txt"></span>
				            <em class="arr">
				                <img src="../../assets/images/arrow.png" alt />
				            </em>
				        </div>
				    </div>
				</div>
                <div class="entry-con" @click="$toPage('security')">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">更多</span>
                        </div>
                        <div class="fr">
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 基本信息 -->
            <div class="item mt10">
                <div class="entry-con" @click="goAddressList">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">地址管理</span>
                        </div>
                        <div class="fr">
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>

                <!-- <div class="entry-con">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">姓名</span>
                        </div>
                        <div class="fr">
                            <input v-model="userInfo.realName" class="text-right font-12" type="text" placeholder="请设置姓名" />
                        </div>
                    </div>
                </div>
                <div class="entry-con" @click="sexShow">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">性别</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt" v-if="userInfo.gender == 1">男</span>
                            <span class="entry-txt" v-else-if="userInfo.gender == 2">女</span>
                            <span class="entry-txt" v-else>请设置性别</span>
                        </div>
                    </div>
                </div>
                <div class="entry-con" @click="birthShow">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">生日</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt" v-if="userInfo.birthDate">{{ userInfo.birthDate | dateformat('YYYY-MM-DD') }}</span>
                            <span class="entry-txt" v-else>请设置生日</span>
                        </div>
                    </div>
                </div> -->

                <!-- 后台配置的用户信息 -->
                <!-- <template v-if="materialFieldList && materialFieldList.length">
                    <div @click="showFieldPopup(field)" v-for="field in materialFieldList" :key="field.id" class="entry-con">
                        <div class="con-box">
                            <div class="fl">
                                <span class="entry-name">{{ field.fieldName }}</span>
                            </div>
                            <div class="fr">
                                <template v-if="field.fieldType == 'TEXT'">
                                    <input v-model="extInfos[field.fieldKey]" :placeholder="field.placeholder" class="font-12 text-right" />
                                </template>
                                <template v-if="field.fieldType == 'SELECT'">
                                    <span class="entry-txt">{{ extInfos[field.fieldKey] || field.placeholder }}</span>
                                </template>
                                <template v-if="field.fieldType == 'DATE'">
                                    <span class="entry-txt">{{ extInfos[field.fieldKey] || field.placeholder }}</span>
                                </template>
                            </div>
                        </div>
                    </div>
                </template> -->

                <div class="entry-con" v-if="isApp" @click="goUniversal">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">通用</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt">清除本地缓存等</span>
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="item mt10">
                <div class="entry-con" v-if="isApp" @click="goAbout">
                    <div class="con-box">
                        <div class="fl">
                            <span class="entry-name">关于我们</span>
                        </div>
                        <div class="fr">
                            <span class="entry-txt">{{ vsNum }}</span>
                            <em class="arr">
                                <img src="../../assets/images/arrow.png" alt />
                            </em>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
		
		<div class="font-12 text-center text-muted mt-1">
			当前版本：{{$configfix.Version}}
		</div>
		
        <!-- 普通H5 -->
        <div class="b-btn" @click="logout" :class="themes.theme" v-if="isWeixin">
            <span class="btn-r">退出登录</span>
        </div>

        <!-- 微信浏览器 -->
        <div class="b-btn" @click="wxLogout" :class="themes.theme" v-if="!isWeixin && !$utils.test.isEmpty(userInfo.mobile)">
            <span class="btn-r">退出登录</span>
        </div>

        <!--上传图片选择-->
        <van-action-sheet v-model="picshow" :actions="actions" cancel-text="取消" @select="onSelect" @cancel="onCancel" />
        <!--/上传图片选择-->
    </div>
</template>

<script>
import { Picker, DatetimePicker, ActionSheet } from 'vant'
import { upload } from 'api/common/common'
import config from 'config/config'
import uploadimg from 'utils/uploadimg'
import { mapState } from 'vuex'
import store from '@/store'
import generalServiceImpl from 'utils/upLoadPic'
import { getUserInfo, editBirthday, uploadFile, editSex, editPortrait } from 'api/account'
import oauthService from 'service/oauth'
import { getUa } from 'utils/utils'

export default {
    data() {
        return {
            userInfo: {}, //账户设置
            photoServer: this.$imgUrlHead, //图片
            currentDate: new Date(),
            minDate: new Date(1930, 0, 1),
            maxDate: new Date(),
            birthshow: false,
            sexshow: false,
            sexStyle: '',
            columns: ['男', '女'],
            Headportrait: '',
            actions: [
                {
                    name: '相册'
                },
                {
                    name: '相机'
                }
            ],
            picshow: false,
            isApp: false,
            vsNum: config.vsNum,
            isWeixin: !getUa().isWeixin || !store.state.enableWeixinLogin
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    mounted() {
        //获取个人设置初始化数据
        this.UserInfo()
        this.Ishas()
        let that = this

    },
    methods: {
        //返回
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },

        //是否是app
        Ishas() {
            if (window.plus) {
                this.isApp = true
            } else {
                this.isApp = false
            }
        },

        goUniversal() {
            this.$router.push('Universal')
        },

        goAbout() {
            this.$router.push('about')
        },

        UserInfo() {
            getUserInfo().then((res) => {
                if (!res.success) {
                    this.$toast({ duration: 1000, message: res.msg })
                }
                this.userInfo = res.result
            }),
                () => {
                    this.$toast({ duration: 1000, message: '获取数据失败' })
                }
        },

        //去地址管理
        goAddressList() {
            this.$router.push('/addressList')
        },
		
		//去交易密码页面
		goBalanceCode() {
		    this.$router.push('/balanceCode')
		},

        //修改资料
        goEdit(type, name, title) {
            if ((type == 'phone' && name == null) || (type == 'loginpwd' && name == null)) {
                this.$toast('请在个人中心绑定手机号')
                return
            }

            this.$router.push({
                path: `/editData`,
                query: {
                    type: type,
                    name: name,
                    title: title
                }
            })
        },

        // 弹出上传
        showpic() {
            this.picshow = true
        },

        //图片上传Select选择
        onSelect(item) {
            this.picshow = false
            item.name == '相册' ? this.appendByGallery() : this.getImage()
        },

        //相册上传图片
        appendByGallery() {
            let that = this
            generalServiceImpl.appendByGallery().then((res) => {
                let pic = res
                editPortrait({
                    picFile: res
                })
                    .then((res) => {
                        if (res.status == 1) {
                            that.userInfo.headPortrait = pic
                        } else {
                            this.$toast(res.msg)
                        }
                    })
                    .catch((e) => {})
            })
        },

        //拍照上传图片
        getImage() {
            let that = this
            generalServiceImpl.getImage().then((res) => {
                let pic = res
                editPortrait({
                    picFile: res
                }).then((res) => {
                    if (res.status == 1) {
                        that.userInfo.headPortrait = pic
                    } else {
                        this.$toast(res.msg)
                    }
                })
            })
        },

        // 将头像显示
        async handleFile(event) {
            this.$toast.loading({
                message: '上传中...',
                duration: 0
            })
            try {
                let result = await uploadimg(event.target.files[0])
                if (!result.success) {
                    this.$toast(result.msg)
                    return
                }
                editPortrait({ picFile: result.photos }).then((res) => {
                    if (res.status != 1) {
                        this.$toast(res.mg)
                        return
                    }
                    this.$toast('上传成功')
                    this.UserInfo()
                })
            } catch (error) {
                this.$toast(error.msg)
            }
        },

        // 退出登录(H5)
        logout() {
            this.$dialog
                .confirm({
                    title: '退出登录',
                    message: '是否确认退出登录'
                })
                .then(() => {
                    oauthService.logout().then((res) => {
                        if (res.success) {
                            localStorage.removeItem('invitCode')
                            this.$router.push('/index')
                        } else {
                            this.$toast(res.msg)
                        }
                    })
                })
        },

        // 退出登录(微信浏览器)
        wxLogout() {
            this.$router.push({name: 'logoutPage'})
        },

        // 关闭弹窗
        onCancel() {
            this.picshow = false
        }
    }
}
</script>

<style src="../../assets/css/account.css" scoped></style>
<style scoped>
.files {
    position: relative;
}
.files input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.files div {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.entry-con .con-box .arr {
    width: 8px;
    height: 8px;
    margin-left: 5px;
    margin-top: 8px;
}
</style>

<style>
input::-webkit-input-placeholder {
    /* WebKit, Blink, Edge 适配谷歌*/
    font-size: 12px;
}

input::-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐*/
    font-size: 12px;
}

input:-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐*/
    font-size: 12px;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10-11 适配ie*/
    font-size: 12px;
}
</style>
